<script setup lang="ts">
	//供应商发布营销
	import { onMounted, ref, reactive } from "vue";
	import {
		validatePhoneNumber
	} from '@/utlis/common.js'
	import {
		getCurrentInstance
	} from 'vue'

	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	import form from "../../../uni_modules/uview-plus/libs/config/props/form";
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router'
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	onLoad((options) => {
		// console.log(options);
		getDetail()
	})
	onMounted(() => {

	})
	const getDetail = () => {
		fileList.value.fileList0 = []
		fileList.value.fileList1 = []
		fileList.value.fileList2 = []
		fileList.value.fileList3 = []
		fileList.value.fileList4 = []
		fileList.value.fileList5 = []
		//回显
		proxy.$req('GET', proxy.$api.meiyePayInfoquery, {
			type: userStoreInfo.userFlag == '0' ? 0 : userStoreInfo.userFlag == '1' ? 2 : 1
		}).then((res) => {
			console.log(res, "打印res");
			items.forEach((item, index) => {
				if (item.value == res.result.acctTypeCode) {
					current.value = index
				}
			})
			gysForm.value.acctTypeCode = res.result.acctTypeCode ? res.result.acctTypeCode : 57
			// res.result.acctCertificateA && 
			res.result.acctCertificateA ? fileList.value.fileList0.push(Object.assign({}, { url: res.result.acctCertificateA, thumb: res.result.acctCertificateA })) : ''
			// res.result.acctCertificateB && 
			res.result.acctCertificateA ? fileList.value.fileList1.push(Object.assign({}, { url: res.result.acctCertificateB, thumb: res.result.acctCertificateB })) : ''
			// res.result.bankImage && 
			res.result.acctCertificateA ? fileList.value.fileList2.push(Object.assign({}, { url: res.result.bankImage, thumb: res.result.bankImage })) : ''
			// res.result.businessLicenseImage && 
			res.result.acctCertificateA ? fileList.value.fileList3.push(Object.assign({}, { url: res.result.businessLicenseImage, thumb: res.result.businessLicenseImage })) : ''
			// res.result.fridcardfronturl && 
			res.result.acctCertificateA ? fileList.value.fileList4.push(Object.assign({}, { url: res.result.fridcardfronturl, thumb: res.result.fridcardfronturl })) : ''
			// res.result.fridcardbehindurl && 
			res.result.fridcardbehindurl ? fileList.value.fileList5.push(Object.assign({}, { url: res.result.fridcardbehindurl, thumb: res.result.fridcardbehindurl })) : ''
			//6
			res.result.splitcooperationfile ? fileList.value.fileList6.push(Object.assign({}, { url: res.result.splitcooperationfile, thumb: res.result.splitcooperationfile })) : ''
			//7
			res.result.splitentrustfile ? fileList.value.fileList7.push(Object.assign({}, { url: res.result.splitentrustfile, thumb: res.result.splitentrustfile })) : ''
			//8
			res.result.networkxy ? fileList.value.fileList8.push(Object.assign({}, { url: res.result.networkxy, thumb: res.result.networkxy })) : ''
			gysForm.value.splitcooperationfileName = res.result.splitcooperationfileName


			gysForm.value.ids = res.result.id
			gysForm.value.acctCertificateNo = res.result.acctCertificateNo
			gysForm.value.acctName = res.result.acctName
			gysForm.value.acctNo = res.result.acctNo
			gysForm.value.acctOpenBankCode = res.result.acctOpenBankCode
			gysForm.value.acctOpenBankName = res.result.acctOpenBankName
			gysForm.value.address = res.result.address
			gysForm.value.businessLicense = res.result.businessLicense
			gysForm.value.contactsPhone = res.result.contactsPhone
			gysForm.value.contactsUser = res.result.contactsUser
			gysForm.value.enterpriseName = res.result.enterpriseName
			gysForm.value.legalPersonCertificateNo = res.result.legalPersonCertificateNo
			gysForm.value.legalPersonName = res.result.legalPersonName
			gysForm.value.type = res.result.type
		})
	}
	let itemId = ref('')
	let pageObj = ref({})
	let form1 = ref(null)
	let gysForm = ref({
		acctCertificateNo: '',//收款账户证件号
		acctName: '',//收款账户名称	
		acctNo: '',//收款账户卡号	
		acctOpenBankCode: '',//收款账户开户行号	
		acctOpenBankName: '',//收款账户开户名称
		acctTypeCode: '57',//收款账户账户类型57：对公 58：对私
		address: '',//门店地址
		businessLicense: '',//营业执照号码
		contactsPhone: '',//联系电话
		contactsUser: '',//联系人
		enterpriseName: '',//企业名称
		id: '',//主键id
		legalPersonCertificateNo: '',//法人证件号
		legalPersonName: '',//法人姓名
		type: '',//0 用户端 1供应商端 2商家端
		ids: null,
		splitcooperationfileName: ''
	})
	let gysRules = ref({
		type: {},
		acctCertificateNo: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		acctName: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		acctNo: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		acctOpenBankCode: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		acctOpenBankName: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		address: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		businessLicense: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		contactsUser: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		enterpriseName: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		legalPersonCertificateNo: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		legalPersonName: {
			required: false,
			message: '请输入正确内容',
			trigger: ['change']
		},
		contactsPhone: [{
			required: false,
			message: '手机号码必填',
		},
		{
			validator: (rule, value, callback) => {
				console.log(value);
				return validatePhoneNumber(value);
			},
			message: '手机号码不正确',
			trigger: ['change'],
		}],
	})
	const afterRead = (e, type) => {
		// console.log(fileList.value[`fileList${type}`], 'fileList[type]');
		// [`fileList${type}`]
		console.log(e);
		const item = e.file;
		// fileList.value[`fileList${type}`].push({
		// 	...item,
		// 	//提示上传中
		// 	status: 'uploading',
		// 	message: '上传中'
		// });
		uni.showLoading({
			title: '上传中',
		})
		for (let a = 0; a <= item.length; a++) {
			uni.uploadFile({
				url: proxy.$uploadUrl + proxy.$api.uploadFile,
				filePath: item[a].url,
				name: 'file',
				formData: {
					file: item[a].url,
				},
				success: (uploadFileRes) => {
					console.log(JSON.parse(uploadFileRes.data));
					if (!JSON.parse(uploadFileRes.data).success) {
						uni.showToast({
							title: JSON.parse(uploadFileRes.data).message,
							icon: 'none'
						})
						// setTimeout(() => {
						// 	fileList.value[`fileList${type}`].splice(-1)
						// }, 700)
						return
					}
					let result = JSON.parse(uploadFileRes.data).result
					// console.log(result, 'result');
					uni.hideLoading()
					fileList.value[`fileList${type}`].push(
						// item[a]
						Object.assign({}, {
							// status: 'success',
							// message: '上传成功',
							url: result,
							thumb: result
						})
					);
					console.log(fileList.value[`fileList${type}`]);
				},
				complete() { }
			});
		}

	}
	const deletePic = (e, type) => {
		console.log(e);
		fileList.value[`fileList${type}`].splice(e.index, 1)
	}
	let fileList = ref({
		fileList0: [],
		fileList1: [],
		fileList2: [],
		fileList3: [],
		fileList4: [],
		fileList5: [],
		//--------
		fileList6: [],
		fileList7: [],
		fileList8: [],
	})
	const submitForm = () => {
		//校验图片
		// Object.keys(gysForm.value).forEach(key => {
		// 	console.log(key);
		// })
		//校验表单内图片和描述至少上传一项
		//设置表单label和上传图片的响应数组对应
		// let labelObj = {
		// 	fileList0: 'need',
		// 	fileList1: 'description',
		// 	fileList2: 'project',
		// 	fileList3: 'zili',
		// 	fileList4: 'anli',
		// 	fileList5: 'fangshi',
		// }
		// let toastObj = {
		// 	fileList0: 'need',
		// 	description: '公司介绍图片和文字至少存在一项',
		// 	project: '公司项目图片和文字至少存在一项',
		// 	zili: '公司资历图片和文字至少存在一项',
		// 	anli: '合作案例图片和文字至少存在一项',
		// 	fangshi: '合作方式图片和文字至少存在一项',
		// }
		// let err = ''
		// //循环上传图片数组，判断图片和文字是否有一项为空（缩略图没有label，给个固定值）
		// Object.keys(fileList.value).forEach((key) => {
		// 	// console.log(key);
		// 	if (fileList.value[key].length < 1 && !gysForm.value[labelObj[key]]) {
		// 		console.log('错误的', key, labelObj[key]);
		// 		err = toastObj[labelObj[key]]
		// 		return
		// 	}
		// })
		// if (err) {
		// 	uni.showToast({
		// 		title: err,
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		// let err = ''
		// if (!fileList.value.fileList0.length) {
		// 	err = '请上传收款账户证件，正面照'
		// } else if (!fileList.value.fileList1.length) {
		// 	err = '请上传收款账户证件，反面照'
		// } else if (!fileList.value.fileList2.length) {
		// 	err = '请上传收款银行卡照片'
		// } else if (!fileList.value.fileList3.length) {
		// 	err = '请上传营业执照照片'
		// } else if (!fileList.value.fileList4.length) {
		// 	err = '请上传法人身份证照片，正面照'
		// } else if (!fileList.value.fileList5.length) {
		// 	err = '请上传法人身份证照片，反面照'
		// }
		// if (err) {
		// 	uni.showToast({
		// 		title: err,
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		//校验表单
		form1.value.validate().then(res => {
			// let url;
			// if (itemId.value) {
			// 	url = proxy.$api.meiyePayInfoquery
			// } else {
			// url = proxy.$api.meiyePayInfo
			// }
			// let a = {
			// 	acctCertificateNo: gysForm.value.acctCertificateNo,
			// 	acctName: gysForm.value.acctName,
			// 	acctNo: gysForm.value.acctNo,
			// 	acctOpenBankCode: gysForm.value.acctOpenBankCode,
			// 	acctOpenBankName: gysForm.value.acctOpenBankName,
			// 	acctTypeCode: gysForm.value.acctTypeCode,
			// 	address: gysForm.value.address,
			// 	businessLicense: gysForm.value.businessLicense,
			// 	contactsPhone: gysForm.value.contactsPhone,
			// 	contactsUser: gysForm.value.contactsUser,
			// 	enterpriseName: gysForm.value.enterpriseName,
			// 	legalPersonCertificateNo: gysForm.value.legalPersonCertificateNo,
			// 	legalPersonName: gysForm.value.legalPersonName,
			// 	type: userStoreInfo.userFlag == '0' ? 0 : userStoreInfo.userFlag == '1' ? 2 : 1,
			// 	acctCertificateA: JSON.stringify(fileList.value.fileList0),
			// 	acctCertificateB: JSON.stringify(fileList.value.fileList1),
			// 	bankImage: JSON.stringify(fileList.value.fileList2),
			// 	businessLicenseImage: JSON.stringify(fileList.value.fileList3),
			// 	fridcardfronturl: JSON.stringify(fileList.value.fileList4),
			// 	fridcardbehindurl: JSON.stringify(fileList.value.fileList5),
			// }
			// console.log(a, "打印form数据")
			proxy.$req('POST', proxy.$api.meiyePayInfo, {
				id: gysForm.value.ids,
				acctCertificateNo: gysForm.value.acctCertificateNo,
				acctName: gysForm.value.acctName,
				acctNo: gysForm.value.acctNo,
				acctOpenBankCode: gysForm.value.acctOpenBankCode,
				acctOpenBankName: gysForm.value.acctOpenBankName,
				acctTypeCode: gysForm.value.acctTypeCode,
				address: gysForm.value.address,
				businessLicense: gysForm.value.businessLicense,
				contactsPhone: gysForm.value.contactsPhone,
				contactsUser: gysForm.value.contactsUser,
				enterpriseName: gysForm.value.enterpriseName,
				legalPersonCertificateNo: gysForm.value.legalPersonCertificateNo,
				legalPersonName: gysForm.value.legalPersonName,
				type: userStoreInfo.userFlag == '0' ? 0 : userStoreInfo.userFlag == '1' ? 2 : 1,
				splitcooperationfileName: gysForm.value.splitcooperationfileName,
				acctCertificateA: fileList.value.fileList0[0].url,
				acctCertificateB: fileList.value.fileList1[0].url,
				bankImage: fileList.value.fileList2[0].url,
				businessLicenseImage: fileList.value.fileList3[0].url,
				fridcardfronturl: fileList.value.fileList4[0].url,
				fridcardbehindurl: fileList.value.fileList5[0].url,
				splitcooperationfile: fileList.value.fileList6[0].url,
				splitentrustfile: fileList.value.fileList7[0].url,
				networkxy: fileList.value.fileList8[0].url,
			}).then((res) => {
				console.log(res, 'ressubmit');
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				if (res.success) {
					setTimeout(() => {
						uni.navigateBack()
					}, 600)
				}
			})
		}).catch(errors => {
			console.log(errors);
			uni.showToast({
				title: '请填写完整',
				icon: 'none'
			})
		})
	}
	const goAuth = () => {
		router.push({
			name: 'authRole',
			params: {}
		})
	}
	let current = ref(0)
	let items = reactive(
		[
			{
				name: "对公",
				value: '57',
				checked: 'true'
			},
			{
				name: "对私",
				value: '58'
			},

		]
	)
	const radioChange = (evt) => {
		console.log(evt)
		gysForm.value.acctTypeCode = evt.detail.value
		for (let i = 0; i < items.length; i++) {
			if (items[i].value === evt.detail.value) {
				current.value = i;
				break;
			}
		}
	}
	//选取门店地址
	const getMapChoseAddress = () => {
		uni.chooseLocation({
			success: function (res) {
				console.log(res);
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
				if (res.address) {
					gysForm.value.address = res.address
				}
			}
		});
	}
</script>
<template>
	<!-- <view style="padding:16rpx 32rpx;background-color: #F2E6E7;" class="r-flex-between-center"
		v-if="userStoreInfo.userFlag==2?!userStoreInfo.userInfo.supplier.isReal:userStoreInfo.userFlag==1?!userStoreInfo.userInfo.shoppingStore.isReal:false  ">
		<text style="color: #FF6C6C;font-size: 28rpx;font-weight: 600;">企业未认证，认证后可发布营销信息</text>
		<view style="background-color: #FF6B6B;color: #fff;font-size: 22rpx;padding: 10rpx 20rpx;border-radius: 60rpx;"
			@click="goAuth">
			去认证
		</view>
	</view> -->
	<!-- v-if="gysForm.acctTypeCode==57" -->
	<view class="form">
		<u--form :model="gysForm" :rules="gysRules" ref="form1" labelPosition="top" labelWidth="150">
			<u-form-item class="formItem" label="收款账户账户类型" prop="acctTypeCode">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
						style="display: inline-block;margin-right: 50rpx;">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</u-form-item>
			<u-form-item class="formItem" label="收款账户证件" prop="description">
				<view class="formItemArea">
					<view class="">
						证件正面
					</view>
					<u-upload :fileList="fileList.fileList0" @afterRead="afterRead($event,0)"
						@delete="deletePic($event,0)" name="1" multiple :maxCount="1"></u-upload>
				</view>
				<view class="formItemArea">
					<view class="">
						证件反面
					</view>
					<u-upload :fileList="fileList.fileList1" @afterRead="afterRead($event,1)"
						@delete="deletePic($event,1)" name="1" multiple :maxCount="1"></u-upload>
				</view>
			</u-form-item>
			<u-form-item class="formItem" label="收款账户证件号" prop="acctCertificateNo">
				<u--input v-model="gysForm.acctCertificateNo" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="收款账户名称" prop="acctName">
				<u--input v-model="gysForm.acctName" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="收款账户卡号" prop="acctNo">
				<u--input v-model="gysForm.acctNo" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="收款账户开户行号" prop="acctOpenBankCode">
				<u--input v-model="gysForm.acctOpenBankCode" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="收款账户开户名称" prop="acctOpenBankName">
				<u--input v-model="gysForm.acctOpenBankName" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="收款账户银行卡照片" prop="bankImage">
				<view class="formItemArea">
					<u-upload :fileList="fileList.fileList2" @afterRead="afterRead($event,2)"
						@delete="deletePic($event,2)" name="1" multiple :maxCount="1"></u-upload>
				</view>
			</u-form-item>
			<!-- <u-form-item class="formItem" label="门店地址" prop="address">
				<u--input v-model="gysForm.address" border="none" placeholder="请输入"></u--input>
			</u-form-item> -->
			<u-form-item label="门店地址" prop="address" borderBottom ref="" @click.stop="getMapChoseAddress">
				<u--input class="inputClass" v-model="gysForm.address" disabled disabledColor="#ffffff"
					placeholder="门店地址" border="none" :customStyle="{pointerEvents:'none'}"></u--input>
				<u-icon name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item class="formItem" label="营业执照号码" prop="businessLicense">
				<u--input v-model="gysForm.businessLicense" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="营业执照照片" prop="bankImage">
				<view class="formItemArea">
					<u-upload :fileList="fileList.fileList3" @afterRead="afterRead($event,3)"
						@delete="deletePic($event,3)" name="1" multiple :maxCount="1"></u-upload>
				</view>
			</u-form-item>
			<u-form-item class="formItem" label="联系电话" prop="contactsPhone">
				<u--input v-model="gysForm.contactsPhone" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="联系人" prop="contactsUser">
				<u--input v-model="gysForm.contactsUser" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="企业名称" prop="enterpriseName">
				<u--input v-model="gysForm.enterpriseName" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="法人身份证照片" prop="description">
				<view class="formItemArea">
					<view class="">
						证件正面
					</view>
					<u-upload :fileList="fileList.fileList4" @afterRead="afterRead($event,4)"
						@delete="deletePic($event,4)" name="1" multiple :maxCount="1"></u-upload>
				</view>
				<view class="formItemArea">
					<view class="">
						证件反面
					</view>
					<u-upload :fileList="fileList.fileList5" @afterRead="afterRead($event,5)"
						@delete="deletePic($event,5)" name="1" multiple :maxCount="1"></u-upload>
				</view>
			</u-form-item>
			<u-form-item class="formItem" label="法人证件号" prop="legalPersonCertificateNo">
				<u--input v-model="gysForm.legalPersonCertificateNo" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="法人姓名" prop="legalPersonName">
				<u--input v-model="gysForm.legalPersonName" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="分账合作协议文件名称" prop="legalPersonName">
				<u--input v-model="gysForm.splitcooperationfileName" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="分账合作协议" prop="zili">
				<view class="formItemArea">
					<u-upload :fileList="fileList.fileList6" @afterRead="afterRead($event,6)"
						@delete="deletePic($event,6)" name="1" multiple :maxCount="1"></u-upload>
				</view>
			</u-form-item>
			<u-form-item class="formItem" label="分账结算授权委托书" prop="zili">
				<view class="formItemArea">
					<u-upload :fileList="fileList.fileList7" @afterRead="afterRead($event,7)"
						@delete="deletePic($event,7)" name="1" multiple :maxCount="1"></u-upload>
				</view>
			</u-form-item>
			<u-form-item class="formItem" label="电子协议" prop="zili">
				<view class="formItemArea">
					<u-upload :fileList="fileList.fileList8" @afterRead="afterRead($event,8)"
						@delete="deletePic($event,8)" name="1" multiple :maxCount="1"></u-upload>
				</view>
			</u-form-item>
		</u--form>
		<view class="gysBtn" @click="submitForm('gysAddMarket')">
			提交
		</view>
	</view>
</template>
<style lang="scss">
	.form {
		width: 686rpx;
		margin: 0 auto;

		.formItem {
			border-bottom: 1rpx solid #e7e7e7;

			.formItemArea {
				width: 100%;
			}
		}
	}

	.gysBtn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #CB645E;
		border-radius: 10rpx;
		color: #fff;
		margin: 50rpx auto;
	}
</style>